export interface IUseMouseInElementState {
  left: number;
  top: number;
  rect: any;
  offsetLeft: number;
  offsetWidth: number;
}
export function useMouseInElement() {
  const state = reactive<IUseMouseInElementState>({
    left: 0,
    top: 0,
    rect: {
      bottom: 0,
      height: 0,
      left: 0,
      right: 0,
      top: 0,
      width: 0,
      x: 0,
      y: 0,
    },
    offsetLeft: 0,
    offsetWidth: 0,
  });

  const getComputed = (e: MouseEvent, el: any) => {
    state.rect = el.getBoundingClientRect();
    state.offsetLeft = state.rect.left;
    state.offsetWidth = el.offsetWidth;
    state.left = e.clientX - state.offsetLeft;
    state.top = e.clientY;
  };

  return {
    ...toRefs(state),
    getComputed,
  };
}
